<template>
	<view style="height: 100%;">
		<view class="banner" v-if="Banner.top_adv_list.length"
			style="margin-bottom: 20rpx;height:250rpx; overflow: hidden;">
			<swiper class="swiper1" :circular="true" :indicator-dots="false" autoplay="true" interval="2000"
				duration="500">
				<swiper-item v-for="(item,index) in Banner.top_adv_list" :key="index">
					<navigator v-if="item.adv_url" :url="item.adv_url">
						<image style="width: 100%;" :src="item.adv_img" mode="widthFix"></image>
					</navigator>
					<image v-else style="width: 100%;" :src="item.adv_img" mode="widthFix"></image>
				</swiper-item>
			</swiper>
		</view>

		<view class="process">
			<view class="processTime flex">
				<view class="fs18" :class="[(activeNum1 == index) ? 'processTimeActive':'']"
					@click="activeColor1(index,item.state)" v-for="(item,index) in process3" :key="index">
					{{item.name}}
				</view>

			</view>
			<view class="processLine"></view>
			<!-- <view class="points flex">
				<view :class="[(activeNum1 == index) ? 'pointsActive':'']" @click="activeColor1(index)" v-for="(item,index) in process3" :key="index" >
					{{item.name}}
				</view>
			</view> -->
			<!-- <view class="processName flex">	
				<view class="fs21 C333" :class="[(activeNum1 == index) ? 'processNameActive':'']" @click="activeColor1(index)" v-for="(item,index) in process3" :key="index" >
					{{item.name}}
				</view>
			</view> -->
		</view>

		<view class="productLis">
			<view class="product" v-for="(itme,index) in list" :key="index" @click="Navigato(itme.goods_id)">
				<image style="width: 333upx;height: 333upx;" :src="itme.groupbuy_image" mode=""></image>
				<view class="msonimg fs18 Cfff" v-if="itme.groupbuy_state_text=='正常'">抢购</view>
				<view class="productName fs18 C333 twoline">{{itme.goods_name}}</view>
				<view class="">
					<text class="Cfe0000 fs21 bold">￥{{itme.groupbuy_price}} </text> <text
						class="paddingL20 strick fs18 C666">￥{{itme.goods_price}}</text>
				</view>
				<view class="">
					<text style="display: inline-block;margin-top: 18upx;"
						class="fs21 C666">销量{{itme.buyer_count}}</text>
					<text v-if="activeNum1==0" class="productBtn" style="background-color: #EEEEEE;">已结束</text>
					<text v-if="activeNum1==1" class="productBtn">立即抢购</text>
					<text v-if="activeNum1==2" class="productBtn">即将开始</text>
				</view>
			</view>

		</view>
		<view v-if="list.length<=0">
			<image style="width: 100%;" :src="`${picUrl}/InfoNull.png`" mode="widthFix"></image>
		</view>

		<view class="banner" v-if="Banner.bottom_adv_list!=0"
			style="margin-bottom: 20rpx;height:250rpx; overflow: hidden;">
			<swiper class="swiper1" :circular="true" :indicator-dots="false" autoplay="true" interval="2000"
				duration="500">
				<swiper-item v-for="(item,index) in Banner.bottom_adv_list" :key="index">
					<navigator v-if="item.adv_url" :url="item.adv_url">
						<image style="width: 100%;" :src="item.adv_img" mode="widthFix"></image>
					</navigator>
					<image v-else style="width: 100%;" :src="item.adv_img" mode="widthFix"></image>
				</swiper-item>
			</swiper>
		</view>

		<!-- <view style="padding: 0 20upx;"  class="tabNav">		
			<view  :class="num=='aaa'?'curr':''" @click="tabNav('aaa','')">全部</view>
			<view  :class="num==index?'curr':''" v-for="(item,index) in ClassList" :key="index" @click="tabNav(index,item.class_id)">{{item.class_name}}</view>
		</view>
		
		<view class="productLis" >
			<view class="product"  v-for="(itme,index) in ListInfo" :key="index"  @click="Navigato(itme.goods_id)">
				<image style="width: 333upx;height: 333upx;" :src="itme.groupbuy_image" mode=""></image>
				<view class="msonimg fs18 Cfff" v-if="itme.groupbuy_state_text=='正常'">抢购</view>
				<view class="productName fs18 C333 twoline">{{itme.goods_name}}</view>
				<view class="">
					<text class="Cfe0000 fs21 bold">￥{{itme.groupbuy_price}} </text>  <text class="paddingL20 strick fs18 C666">￥{{itme.goods_price}}</text>
				</view>
				<view class="">
					<text style="display: inline-block;margin-top: 18upx;" class="fs21 C666">销量{{itme.sales_count}}</text>
					<text class="productBtn">立即抢购</text>
				</view>
			</view>

		</view>
		<view v-if="ListInfo.length==0">
			<image style="width: 100%;" :src="`${picUrl}/InfoNull.png`" mode="widthFix"></image>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				indicatorDots: false,
				circular: true,
				list: [1, 2, 3, 4],
				ClassList: ["最新秒杀", "流行服装", "数码家电", "家居家纺"],
				ClassId: "",
				num: "aaa",
				state: "aaa",
				process3: [{
						"name": "已结束",
						state: 2
					},
					{
						"name": "进行中",
						state: 0
					},
					{
						"name": "未开始",
						state: 1
					}
				],
				activeNum1: 1,
				ListInfo: "",
				BannerList: "",
				Banner: {
					top_adv_list: [],
					bottom_adv_list: []
				}
			}
		},
		onLoad() {
			this.getBanner();
			this.GetList();
			this.ClasList();
			this.GetList2();
		},
		methods: {
			getBanner() { //获取广告列表
				this.$util.request({
					url: '/mobile/index.php?act=h5_adv&op=buyingAdvList',
					method: 'get',
					data: {},
				}).then((res) => {
					if (res.datas.top_adv_list && res.datas.top_adv_list.length != 0) {
						this.Banner.top_adv_list = []
						res.datas.top_adv_list.forEach(item => {
							if (item.adv_url != '') {
								this.Banner.top_adv_list.push(item)
							}
						})
					}
					if (res.datas.bottom_adv_list && res.datas.bottom_adv_list.length != 0) {
						this.Banner.bottom_adv_list = []
						res.datas.bottom_adv_list.forEach(item => {
							if (item.adv_url != '') {
								this.Banner.bottom_adv_list.push(item)
							}
						})
					}
				})
			},
			Navigato(goods_id) {
				uni.navigateTo({
					url: '/mall/goods/info?goods_id=' + goods_id
				})
			},
			GetList() { //获取列表状态排序
				let that = this;
				that.$util.request({
					url: '/mobile/index.php?act=groupbuy&op=index',
					method: 'get',
					data: {
						state: that.state
					},
				}).then(function(res) {
					that.list = res.datas.groupbuy_list;
				})
			},
			ClasList() { //获取分类
				let that = this;
				that.$util.request({
					url: '/mobile/index.php?act=groupbuy&op=groupbuy_classes',
					method: 'get',
					data: {

					},
				}).then(function(res) {
					that.ClassList = res.datas.groupbuy_classes;
				})
			},
			GetList2() { //获取列表分类排序
				let that = this;
				that.$util.request({
					url: '/mobile/index.php?act=groupbuy&op=index',
					method: 'get',
					data: {
						class_id: that.ClassId,
					},
				}).then(function(res) {
					that.ListInfo = res.datas.groupbuy_list;
				})
			},
			activeColor1(index, state) {
				this.activeNum1 = index;
				this.state = state;
				this.GetList();
			},
			tabNav(index, ClassId) {
				this.num = index;
				this.ClassId = ClassId;
				this.GetList2();
			},
			// getBanner(){
			// 	let that=this;
			// 	util.request({//获取轮播
			// 			url: '/mobile/index.php?act=groupbuy&op=banner_list',
			// 			method: 'get',
			// 			data: {},
			// 		}).then(function(res) {
			// 			that.BannerList=res.datas.adv_list;
			// 		})

			// }

		},



	}
</script>

<style>
	.tabNav view {
		color: #666666;
		margin-right: 35rpx;
		display: inline-block;
		position: relative;
		z-index: 999;
	}

	.None {
		text-align: center;
		font-size: 30rpx;
		font-weight: bold;
	}

	.curr {
		font-size: 30rpx;
		color: #ff4300 !important;
		font-weight: bold;
	}

	.productName {
		height: 70rpx;
		overflow: hidden;
	}

	view {
		background-color: #FFFFFF;
	}

	.Cfff {
		color: #FFFFFF;
	}

	.Cfe0000 {
		color: #ff4300;
	}

	.flex {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-content: space-between;
	}

	.paddingL20 {
		padding-left: 20upx;
	}

	.C999 {
		color: #999;
	}

	.Cff0101 {
		color: #ff0101;
	}

	.Cc00251 {
		color: #c00251;
	}

	.strick {
		text-decoration: line-through;
	}

	.Cfe0000 {
		color: #ff4300;
	}

	.line1 {
		width: 430upx;
	}

	.hide {
		display: none;
	}

	.marginB20 {
		margin-bottom: 20upx;
	}

	.twoline {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.pl20 {
		padding-left: 20upx;
	}

	.positionT {
		position: relative;
		top: 50upx;
	}

	.paddingB15 {
		padding-bottom: 15upx;
	}

	.borderB {
		border-bottom: 1px solid #f4f4f6;
	}

	.borderT {
		border-top: 1px solid #f4f4f6;
	}

	.gl {
		position: absolute;
		right: 30upx;
	}

	.pr30 {
		padding-right: 30upx;
	}

	.C333 {
		color: #333333;
	}

	.C666 {
		color: #666666;
	}

	.Cf00 {
		color: #ff0000;
	}

	.bold {
		font-weight: bold;
	}

	.C1d1d1d {
		color: #1d1d1d;
	}

	.fs30 {
		font-size: 30upx
	}

	.fs26 {
		font-size: 26upx
	}

	.fs12 {
		font-size: 12upx
	}

	.fs16 {
		font-size: 16upx
	}

	.fs14 {
		font-size: 14upx
	}

	.fs27 {
		font-size: 27upx
	}

	.fs18 {
		font-size: 18upx
	}

	.fs28 {
		font-size: 28upx
	}

	.fs10 {
		font-size: 10upx
	}

	.fs30 {
		font-size: 28upx
	}

	.fs24 {
		font-size: 24upx
	}

	.fs20 {
		font-size: 20upx
	}

	.fs22 {
		font-size: 22upx
	}

	.fs21 {
		font-size: 21upx
	}

	.fl {
		float: left;
	}

	.fr {
		float: right;
	}

	.tac {
		text-align: center;
	}

	.Ce5258e {
		color: #e5258e;
	}

	uni-page-body {
		background-color: #FFFFFF;
		color: rgb(102, 102, 102);
	}

	.process {
		/* margin-top: 55upx; */
		padding: 20rpx;
	}

	.processTime>view {
		color: #FFFFFF;
		width: 200upx;
		height: 50upx;
		line-height: 50upx;
		text-align: center;
		border-radius: 15upx;
		background-color: #999999;
		box-shadow: 2upx 2upx 10upx #999999;
	}

	.processTime view.processTimeActive {
		background-color: #ff4300;
		box-shadow: 2upx 2upx 10upx #ff4300;
	}

	.points {
		/* position: relative;
		z-index: 1; */
		padding: 20upx 93upx;
	}

	.points>view {
		position: relative;
		z-index: 10;
		width: 12upx;
		height: 12upx;
		border-radius: 50%;
		background-color: #6c6c6c;
		border: 4upx solid #858585;
	}

	.points>view.pointsActive {
		background-color: #e71488;
		border: 4upx solid #ef66b2;
	}

	.processLine {
		position: relative;
		z-index: 5;
		top: 32upx;
		height: 1upx;
		border-top: 1upx solid #e5007e;
		width: 100%;
	}

	.processName {
		padding: 0upx 58upx;
		margin-top: -10upx;
	}

	.processNameActive {
		color: #e5007e;
	}

	.productLis {
		padding: 0 20upx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-content: space-between;
		flex-wrap: wrap;
		background-color: #FFFFFF;
	}

	.product {
		margin-top: 30upx;
		box-sizing: border-box;
		width: 355upx;
		height: 577upx;
		border: 1px solid #eeeeee;
		padding: 15upx 10upx;
	}

	/* 	.productLis view:nth-child(2n){
		border-left: none;
	} */
	.msonimg {
		position: relative;
		top: -346upx;
		left: 0;
		color: #FFFFFF;
		z-index: 10;
		background-color: #ff4300;
		width: 92upx;
		height: 40upx;
		line-height: 40upx;
		text-align: center;
		margin-top: -15rpx;
		border-top-left-radius: 10rpx;
	}

	.productName {
		padding: 0 10upx;
		line-height: 35upx;
		/* margin-top: -45upx; */
	}

	.productBtn {
		/* margin-top: 20upx; */
		float: right;
		display: inline-block;
		width: 154upx;
		height: 65upx;
		text-align: center;
		line-height: 65upx;
		color: #FFFFFF;
		background-color: #ff4300;
		border-radius: 12upx;
	}



	.fs30 {
		/* font-size: 30upx */
		font-size: 45upx
	}

	.fs26 {
		font-size: 39upx
			/* font-size: 26upx */
	}

	.fs12 {
		font-size: 18upx
			/* font-size: 12upx */
	}

	.fs16 {
		font-size: 24upx
			/* font-size: 16upx */
	}

	.fs14 {
		font-size: 21upx
			/* font-size: 14upx */
	}

	.fs15 {
		font-size: 22.5upx
			/* font-size: 15upx */
	}

	.fs27 {
		font-size: 40.5upx
			/* font-size: 27upx */
	}

	.fs18 {
		font-size: 27upx
			/* font-size: 18upx */
	}

	.fs28 {
		font-size: 42upx
			/* font-size: 28upx */
	}

	.fs10 {
		font-size: 15upx
			/* font-size: 10upx */
	}

	.fs30 {
		font-size: 45upx
			/* font-size: 28upx */
	}

	.fs24 {
		font-size: 36upx
			/* font-size: 24upx */
	}

	.fs20 {
		font-size: 30upx
			/* font-size: 20upx */
	}

	.fs22 {
		font-size: 33upx
			/* font-size: 22upx */
	}

	.fs21 {
		font-size: 31.5upx
			/* font-size: 21upx */
	}
</style>